import React, { useState, useEffect } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { Popconfirm, message } from 'antd';
import axios from 'axios';
export default function Mysite() {
    const [site, setsite] = useState([])
    useEffect(() => {
        axios.post('http://localhost:3001/mycenter/mysite', { u_id: 1 }).then((res) => {
            setsite(res.data)
        })
    }, [])
    const navigate = useNavigate()
    function lookmes() {
        return () => {
            navigate('addsite')
        }
    }
    //删除信息
    function delmes(num) {
        return () => {
            axios.post('http://localhost:3001/mycenter/delSite', { site_id: num }).then((res) => {
                if (res.data.code === 1) {
                    const newsite = [...site];
                    newsite.forEach((v, i) => {
                        if (v.site_id === num) {
                            newsite.splice(i, 1)
                        }
                    })
                    setsite(newsite);
                    message.success('删除成功');
                }
            })

        }
    }
    //设为默认地址
    function setmuo(id, num) {
        return () => {
            console.log(id);
            axios.post('http://localhost:3001/mycenter/defaultSite', { id }).then((res) => {
                if (res.data.code === 1) {
                    const newsite = [...site];
                    newsite.forEach((v) => {
                        v.muo = 0
                    })
                    newsite[num].muo = 1;
                    setsite(newsite);
                    message.success('修改成功');
                }
            })

        }
    }
    return (
        <div>
            <h3 className="tt">地址管理<button onClick={lookmes()} className='addsitebtn'>添加新地址</button></h3>
            <ul className="siteLis">
                <li>
                    <span>收货人</span>
                    <span>区域</span>
                    <span>收货地址</span>
                    <span>联系电话</span>
                    <span>备注</span>
                    <span>操作</span>
                </li>{
                    site.map((site, i) => {
                        return <li key={i}>
                            <span>{site.name}</span>
                            <span>{site.area}</span>
                            <span>{site.site}</span>
                            <span>{site.phone}</span>
                            <span>{site.other}</span>
                            <span>
                                <Popconfirm
                                    title="你确定要设为默认地址吗?"
                                    onConfirm={setmuo(site.site_id, i)}
                                    okText="确认"
                                    cancelText="取消">
                                    <button className={site.muo ? 'muo' : ''}>设为默认地址|</button>
                                </Popconfirm>
                                <button>修改</button>|
                                <Popconfirm
                                    title="你确定要删除这条信息吗?"
                                    onConfirm={delmes(site.site_id)}
                                    okText="删除"
                                    cancelText="取消">
                                    <button>删除</button>
                                </Popconfirm>
                            </span>
                        </li>
                    })
                }
            </ul>
        </div>
    )
}
